import React, { Component } from 'react'
// 在react中可以做受控组件的表单元素有下面这些:
// 1. 文本框
// 2. 密码框
// 3. 文本域
// 4. 单个的复选框
// 5. 下拉框

// 不能受控的表单元素
// 1. 多个复选框
// 2. 多个单选框
// 3. 上传文件的表单元素  <input type="file" />
export default class App extends Component {
  state = {
    username: '',
    password: '',
    info: '',
    isAgree: false,
    city: 'bj',
  }

  // handle = (name) => {
  //   // handle中返回的这个函数,才是onchange的事件处理函数
  //   return (e) => {
  //     // 2. 要知道获取的值是value还是checked
  //     const value =
  //       e.target.type === 'checkbox' ? e.target.checked : e.target.value.trim()
  //     this.setState({
  //       [name]: value,
  //     })
  //   }
  // }

  handle = (name) => (e) => {
    // 2. 要知道获取的值是value还是checked
    const value =
      e.target.type === 'checkbox' ? e.target.checked : e.target.value.trim()
    this.setState({
      [name]: value,
    })
  }

  // a = b => c => d => {

  // }

  // a = b => {
  //   return c => {
  //     return d => {}
  //   }
  // }

  render() {
    const { username, password, info, isAgree, city } = this.state
    return (
      <div>
        用户名:
        <input
          type="text"
          name="username"
          value={username}
          onChange={this.handle('username')}
        />
        <br />
        密码:
        <input
          type="password"
          name="password"
          value={password}
          onChange={this.handle('password')}
        />
        <br />
        介绍:
        <textarea
          name="info"
          id=""
          cols="30"
          rows="10"
          value={info}
          onChange={this.handle('info')}
        ></textarea>
        <br />
        协议:
        <input
          type="checkbox"
          name="isAgree"
          checked={isAgree}
          onChange={this.handle('isAgree')}
        />
        <br />
        城市:
        <select name="city" id="" value={city} onChange={this.handle('city')}>
          <option value="sz">深圳</option>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
          <option value="gz">广州</option>
        </select>
        {/* =================================下面是不能受控的表单元素 ==================== */}
      </div>
    )
  }
}
